<template>
<!-- 达人资源库 -->
  <div id="talentLibrary" @click="thisFalse">
    <img src="@/assets/wang/work/library.png" class="headerImg" />
    <!-- 搜索条件 -->
    <div class="topBox" @click="unfoldGroupFn">
      <div class="mysearchBox">
        <div class="input_group">
          <input
            type="text"
            v-model="input"
            @click.stop="Inputfocus"
            @keyup.enter="searchWord"
            placeholder="请输入达人名称或ID"
          />
          <div @click="searchWord">
            <img src="@/assets/meng/search01.png" />
          </div>
        </div>
        <div class="clearBox" @click="clear_values">
          <img src="@/assets/wang/work/clearAll.png" alt v-if="!clearActive" />
          <img src="@/assets/wang/work/clearAllBlue.png" alt v-else />
          <span :class="{ clearClass: clearActive }">清空筛选条件</span>
        </div>
        <!-- 搜索记录框 -->
        <div
          class="InputRecord"
          v-if="isShow && searchRecord.length !== 0 && input.length == 0"
          ref="checkedBox"
        >
          <ul>
            <li class="first">
              搜索记录
              <img src="@/assets/zhao/delete.png" alt @click="removeAll()" />
            </li>
            <li
              class="second"
              v-for="(item, index) in searchRecord"
              :key="index"
              @click="add_click(item.log)"
            >
              <span>{{ item.log }}</span>
              <img
                src="@/assets/meng/my_header01.png"
                alt
                @click.stop="removeThis(item.id)"
              />
            </li>
          </ul>
        </div>
      </div>
      <!-- <dl v-if="industryDataName.length != 0">
        <dt>达人行业</dt>
        <dd
          ref="ovBox"
          :class="[{ overstep: isOverstep }, { is_unfold: isUnfold }]"
        >
          <div class="cg_items" ref="ovChild">
            <span
              v-for="(item, idx) in industryDataName"
              :key="idx + 'cdi'"
              :class="{ active: item == isActive }"
              @click="getCondition(item)"
              >{{ item }}</span
            >
            <i @click="unfoldFn">{{ isUnfold ? "收起" : "展开" }}</i>
          </div>
        </dd>
      </dl> -->
      <!-- 达人行业 -->
      <category_industry v-model="industryItemObj" :shrink="true"/>
      <!-- 商品种类 -->
      <div style="margin:13px 0 18px;">
        <category_goods v-model="checkedDatasJoe" :shrink="true" />
      </div>
      <div class="selectBox_time">
        <section class="selectBox">
          <div>
            <el_select
              v-model="funsNum"
              title="粉丝数量"
              :options="[
                '不限',
                '10w以下',
                '10w-100w',
                '100w-300w',
                '300w-500w',
                '500w-1000w',
                '1000w以上'
              ]"
            />
          </div>
          <div>
            <el_select
              v-model="sale"
              title="场均销售额"
              :options="[
                '不限',
                '1w以下',
                '1w-5w',
                '5w-10w',
                '10w-20w',
                '20w-50w',
                '50w以上'
              ]"
            />
          </div>
          <div>
            <el_select
              v-model="liveSession"
              title="直播场次"
              :options="[
                '不限',
                '5场以下',
                '5-10场',
                '10-20场',
                '20-50场',
                '50场以上'
              ]"
            />
          </div>
        </section>
        <div class="timeBox">
          <radio_group01
            :radio_values="['近30天', '近60天', '近90天']"
            v-model="time"
          />
        </div>
      </div>
    </div>
    <p class="upTime">
      资源库列表仅收录近30天内有直播带货记录达人，数据每日早上11点更新
    </p>
    <div class="search_result">
      <table class="table">
        <thead>
          <tr>
            <th>达人</th>
            <th>达人行业</th>
            <th
              @click="sort_fun(false, 1)"
              v-if="orderBy == 1 && sortValue == 1"
            >
              粉丝数量
              <img
                src="@/assets/meng/down_up.png"
                v-if="orderBy == 1 && sortValue == 1"
                class="sort"
              />
            </th>
            <th v-else @click="sort_fun(true, 1)">
              粉丝数量
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderBy == 0 && sortValue == 1"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              @click="sort_fun(false, 0)"
              v-if="orderBy == 1 && sortValue == 0"
            >
              场均销售额
              <img
                src="@/assets/meng/down_up.png"
                v-if="orderBy == 1 && sortValue == 0"
                class="sort"
              />
            </th>
            <th v-else @click="sort_fun(true, 0)">
              场均销售额
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderBy == 0 && sortValue == 0"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              @click="sort_fun(false, 2)"
              v-if="orderBy == 1 && sortValue == 2"
              class="cursor"
            >
              直播带货场次
              <img
                src="@/assets/meng/down_up.png"
                v-if="orderBy == 1 && sortValue == 2"
                class="sort"
              />
            </th>
            <th v-else @click="sort_fun(true, 2)">
              直播带货场次
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderBy == 0 && sortValue == 2"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th
              @click="sort_fun(false, 3)"
              v-if="orderBy == 1 && sortValue == 3"
              class="cursor"
            >
              场均观看人数
              <img
                src="@/assets/meng/down_up.png"
                v-if="orderBy == 1 && sortValue == 3"
                class="sort"
              />
            </th>
            <th v-else @click="sort_fun(true, 3)">
              场均观看人数
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderBy == 0 && sortValue == 3"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th
              @click="sort_fun(false, 4)"
              v-if="orderBy == 1 && sortValue == 4"
              class="cursor"
            >
              场均UV值
              <img
                src="@/assets/meng/down_up.png"
                v-if="orderBy == 1 && sortValue == 4"
                class="sort"
              />
            </th>
            <th v-else @click="sort_fun(true, 4)">
              场均UV值
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderBy == 0 && sortValue == 4"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th>联系方式/报价</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in talentData" :key="index">
            <td>
              <div class="live_box">
                <div @click="go_to_page01(item.authorid)">
                  <img :src="item.logo" alt />
                </div>

                <div class="live_box_right">
                  <div class="title" @click="go_to_page01(item.authorid)">
                    {{ item.nickname }}
                  </div>
                  <div class="time">抖音号：{{ item.uniqueid }}</div>
                </div>
              </div>
            </td>
            <td>{{ item.categoryname }}</td>
            <td>{{ format_num(item.totalfans) }}</td>
            <td>{{ format_num(item.avgsale) }}</td>
            <td>{{ format_num(item.livenum) }}</td>
            <td>{{ format_num(item.avglook) }}</td>
            <td>{{ item.avguv }}</td>
            <td>
              <button class="no_collect" @click="look(item)">点击查询</button>
            </td>
          </tr>
        </tbody>
      </table>
      <!-- 权限不足 升级会员 -->
      <div class="upgradeBox" v-if="!permissions && !loading">
        <RankUpgrade class="rankUpgrade" />
      </div>
      <!-- <div class="upgradeBox" v-if="permissions && !loading&&vipLevel==0">
        <RankUpgrade class="rankUpgrade" />
      </div> -->
      <div
        class="pageBox"
        v-if="
          (talentData.length != 0 && !loading) || (!permissions && !loading)
        "
      >
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="count"
          :page-size="20"
          :current-page="page"
          :hide-on-single-page="true"
          @current-change="getData"
        ></el-pagination>
      </div>
      <div
        v-loading="loading"
        v-if="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <div
        class="empty"
        v-show="!loading && talentData.length == 0 && permissions"
      >
        <img src="@/assets/liu/zw.png" />
        <div class="empty_box">
          <p>暂无该达人联系方式，请</p>
          <el-popover placement="right" trigger="hover">
            <div class="message_content">
              <div class="popper_arrow"></div>
              <img src="@/assets/img/xiaozhushou_qr.jpg" />
              <div>工作日：9:30--18:30</div>
            </div>
            <span class="service" slot="reference">联系客服</span>
          </el-popover>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <div class="dialog_box">
      <el-dialog :visible.sync="dialogVisible1" :show-close="true">
        <div class="box">
          <div class="live_box">
            <div>
              <img :src="talentPrice.logo" alt />
            </div>
            <div class="live_box_right">
              <div class="title">{{ talentPrice.nickName }}</div>
              <div class="time">抖音号:{{ talentPrice.uniqueId }}</div>
            </div>
          </div>
        </div>
        <div class="topBox_02">
          <div   v-if="
                talentPrice.brandHour != 0 ||
                  talentPrice.electricitySpecial != 0 ||
                  talentPrice.brandDay != 0 ||
                  talentPrice.electricityJoin !=0 ||( talentPrice.tel != '' ||
                  talentPrice.wechat != '' ||
                  talentPrice.qq != '' ||
                  talentPrice.email !='')
              ">
            <div class="notice-box"></div>
            达人报价
          </div>
        </div>
        <div
          class="box_02"
          v-if="
            talentPrice.brandHour != 0 ||
              talentPrice.electricitySpecial != 0 ||
              talentPrice.brandDay != 0 ||
              talentPrice.electricityJoin != 0
          "
        >
          <div class="box_left">
            <p>品牌推广专场（按小时）</p>
            <p v-if="talentPrice.brandHour != 0">
              <span>￥{{ talentPrice.brandHour }}</span> / 小时
            </p>
            <div v-if="talentPrice.brandHour == 0">未开通</div>
          </div>
          <div class="box_right">
            <div>
              <p>电商带货专场（按小时）</p>
              <p v-if="talentPrice.electricitySpecial != 0">
                <span>￥{{ talentPrice.electricitySpecial }}</span> / 小时
              </p>
              <div class="no_open" v-if="talentPrice.electricitySpecial == 0">
                未开通
              </div>
            </div>
          </div>
        </div>
        <div
          class="box_02 box_03"
          v-if="
            talentPrice.brandHour != 0 ||
              talentPrice.electricitySpecial != 0 ||
              talentPrice.brandDay != 0 ||
              talentPrice.electricityJoin != 0
          "
        >
          <div class="box_left">
            <p>品牌推广专场（按天）</p>
            <p v-if="talentPrice.brandDay != 0">
              <span>￥{{ talentPrice.brandDay }}</span> / 天
            </p>
            <div v-if="talentPrice.brandDay == 0">未开通</div>
          </div>
          <div class="box_right">
            <div>
              <p>电商带货拼场（按商品）</p>
              <p v-if="talentPrice.electricityJoin != 0">
                <span>￥{{ talentPrice.electricityJoin }}</span> / 商品
              </p>
              <div class="no_open" v-if="talentPrice.electricityJoin == 0">
                未开通
              </div>
            </div>
          </div>
        </div>
        <div class="topBox_02">
          <div  v-if="
                  talentPrice.tel != '' ||
                  talentPrice.wechat != '' ||
                  talentPrice.qq != '' ||
                  talentPrice.email !='' ||(
                     talentPrice.brandHour != 0 ||
                  talentPrice.electricitySpecial != 0 ||
                  talentPrice.brandDay != 0 ||
                  talentPrice.electricityJoin !=0 
                  )
              ">
            <div class="notice-box"></div>
            联系方式
          </div>
        </div>
        <div
          class="contact"
          v-if="
            talentPrice.tel != '' ||
              talentPrice.wechat != '' ||
              talentPrice.qq != '' ||
              talentPrice.email != ''
          "
        >
          <p v-if="talentPrice.tel">Tel:{{ talentPrice.tel }}</p>
          <p v-else-if="talentPrice.wechat">V:{{ talentPrice.wechat }}</p>
          <p v-else-if="talentPrice.qq">Q:{{ talentPrice.qq }}</p>
          <p v-else-if="talentPrice.email">Email:{{ talentPrice.email }}</p>
        </div>
        <div
          class="box_02 popover"
          v-if="
            (talentPrice.brandHour == 0 &&
              talentPrice.electricitySpecial == 0 &&
              talentPrice.brandDay == 0 &&
              talentPrice.electricityJoin == 0) ||
              (talentPrice.tel == '' &&
                talentPrice.wechat == '' &&
                talentPrice.qq == '' &&
                talentPrice.email == '')
          "
          :class="{
            relationTop:
              talentPrice.brandHour != 0 ||
              talentPrice.electricitySpecial != 0 ||
              talentPrice.brandDay != 0 ||
              talentPrice.electricityJoin != 0
          }"
        >
          <div class="popoverBox">
            <div class="message_content">
              <img src="@/assets/img/xiaozhushou_qr.jpg" />
              <div>工作日：9:30--18:30</div>
            </div>
            <p
              class="newPrice"
              v-if="
                talentPrice.brandHour == 0 &&
                  talentPrice.electricitySpecial == 0 &&
                  talentPrice.brandDay == 0 &&
                  talentPrice.electricityJoin == 0 &&
                  talentPrice.tel == '' &&
                  talentPrice.wechat == '' &&
                  talentPrice.qq == '' &&
                  talentPrice.email == ''
              "
            >
              获取达人最新报价及联系方式，请联系客服
            </p>
            <p
              class="newPrice"
              v-if="
                (talentPrice.brandHour != 0 ||
                  talentPrice.electricitySpecial != 0 ||
                  talentPrice.brandDay != 0 ||
                  talentPrice.electricityJoin != 0) &&
                  (talentPrice.tel == '' ||
                    talentPrice.wechat == '' ||
                    talentPrice.qq == '' ||
                    talentPrice.email == '')
              "
            >
              获取达人联系方式，请联系客服
            </p>
            <p
              class="newPrice"
              v-if="
                talentPrice.brandHour == 0 &&
                  talentPrice.electricitySpecial == 0 &&
                  talentPrice.brandDay == 0 &&
                  talentPrice.electricityJoin == 0 &&
                  (talentPrice.tel != '' ||
                    talentPrice.wechat != '' ||
                    talentPrice.qq != '' ||
                    talentPrice.email != '')
              "
            >
              获取达人最新报价，请联系客服
            </p>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import category_goods from "@/component/category_goods.vue";
import RankUpgrade from "@/component/rankUpgrade.vue";
import category_industry from '@/component/category_industry';

export default {
  props: ["reachBox"],
  data() {
    return {
      input: "",
      searchRecord: [],
      isShow: false, // 控制搜素框显示或隐藏
      clearActive: false,
      category: "0",
      isOverstep: false, //是否超出（初始化）
      isUnfold: false, //是否展示
      checkedDatasJoe: {
        //商品类目数据初始数据，新筛选组件用
        parentId: 0,
        childIds: []
      },
      page: 1,

      funsNum: "不限",
      time: "近30天",
      sale: "不限",
      liveSession: "不限",
      dialogVisible1: false,
      orderBy: 1, //1降序 0升序
      sortValue: 0,
      talentData: [],
      count: 0,
      page: 1,
      permissions: 1,
      loading: false,

      talentPrice: "",
      vipLevel: '',
      industryItemObj:{
        name:'全部',
        id:'0'
      }
    };
  },

  components: { category_goods, RankUpgrade,category_industry },
  watch: {
    industryItemObj(newObj){
      //点击达人行业选项
      if (newObj.name != "全部") {
        this.clearActive = true;
      } else {
        this.clearActive = false;
      }
      this.page = 1;
      this.talentData = [];
      this.getData();
    },
    input(val) {
      if (val != "") {
        this.clearActive = true;
      } else {
        this.page = 1;
        this.talentData = [];
        this.getData();
        this.clearActive = false;
      }
    },
    checkedDatasJoe(val) {
      if (val.parentId != 0 || val.childIds.length != 0) {
        this.clearActive = true;
      } else {
        this.clearActive = false;
      }
      this.page = 1;
      this.talentData = [];
      this.getData();
    },
    // 监听条件是否发生变化
    changeData() {
      this.page = 1;
      this.talentData = [];
      this.getData();
      if (
        this.funsNum != "不限" ||
        this.time != "近30天" ||
        this.sale != "不限" ||
        this.liveSession != "不限"
      ) {
        this.clearActive = true;
      } else {
        this.clearActive = false;
      }
    }
  },
  computed: {
    // 将需要监听的属性放在一个对象里面
    changeData() {
      const { funsNum, time, sale, liveSession } = this;
      return {
        funsNum,
        time,
        sale,
        liveSession
      };
    }
  },
  created() {
    this.vipLevel = localStorage.getItem('vipLevel');
    this.page = 1;
    this.talentData = [];
    this.getData();
  },
  mounted() {},
  methods: {
    unfoldGroupFn() {
      this.isShow = !this.isShow;
      let that = this;
      function eFn(e) {
        let checkedBox = that.$refs.checkedBox;
        if (checkedBox && checkedBox.contains(e.target)) {
          that.isShow = true;
        } else {
          that.isShow = false;
        }
      }
      if (this.isShow) {
        document.onclick = eFn;
      } else {
        document.removeEventListener("click", eFn);
      }
    },
    // 排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.orderBy = 1;
      } else {
        this.orderBy = 0;
      }
      this.sortValue = parm02;
      this.getData();
    },
    // 点击表单获取搜索记录
    Inputfocus() {
      this.isShow = true;
      this.$axios({
        method: "get",
        url: "/api/customer/GetSearchLog"
      })
        .then(res => {
          if (res.data.code == 0) {
            this.searchRecord = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //记录搜索记录
    searchLogo() {
      if (this.input) {
        // 记录搜索记录
        this.$axios({
          method: "get",
          url: "/api/customer/RecordSearchLog",
          params: {
            key: this.input
          }
        })
          .then(res => {
            // console.log(res);
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    // 点击搜素记录赋值给搜索框
    add_click(item) {
      this.isShow = false;
      this.input = item;
      this.page = 1;
      this.talentData = [];
      this.getData();
    },
    // 点击x 删除该条搜索记录
    removeThis(id) {
      this.$axios({
        method: "get",
        url: "/api/customer/DeleteSearchLog",
        params: {
          ids: id
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.searchRecord = this.searchRecord.filter(
              item => item.id !== id
            );
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 点击删除图标删除全部搜索记录
    removeAll() {
      let itemLog = "";
      this.searchRecord.forEach(item => {
        itemLog += item.id + ",";
      });
      itemLog = itemLog.substring(0, itemLog.lastIndexOf(","));
      this.$axios({
        method: "get",
        url: "/api/customer/DeleteSearchLog",
        params: {
          ids: itemLog
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.searchRecord = [];
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 点击别处 让搜索记录框消失
    thisFalse() {
      this.isShow = false;
    },
    unfoldFn() {
      this.isUnfold = !this.isUnfold;
    },
    setCondition() {
      this.$nextTick(() => {
        let box = this.$refs.ovBox;
        if (!box) return;
        let childBox = this.$refs.ovChild;
        let boxHeight = box.offsetHeight;
        let childBoxHeight = childBox.offsetHeight;
        if (boxHeight < childBoxHeight) {
          this.isOverstep = true;
        }
      });
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}`
      });
      window.open(router.href, "_blank");
    },
    searchWord() {
      this.page = 1;
      this.talentData = [];
      this.getData();
    },
    clear_values() {
      this.input = "";
      this.category = "0";
      this.isActive = "全部";
      this.funsNum = "不限";
      this.time = "近30天";
      this.sale = "不限";
      this.liveSession = "不限";
      this.checkedDatasJoe = {
        //组件监听此值是否为初始状态
        //商品类目数据初始数据，新筛选组件用
        parentId: 0,
        childIds: []
      };
      this.industryItemObj = {
        name:'全部',
        id:'0'
      }
      this.checkedDatasJoe = {
        //商品类目数据初始数据，新筛选组件用
        parentId: 0,
        childIds: []
      },
      this.clearActive = false;
      this.page = 1;
      this.talentData = [];
      this.getData();
    },
    look(item) {
      let that = this;
      this.dialogVisible1 = true;
      this.$axios
        .get(
          "api/author/contact",

          {
            params: {
              authorId: item.authorid
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel) that.cancel();
              that.cancel = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            this.talentPrice = res.data.data;
          }
        });
    },
    getData(i) {
      if (i) {
        this.page = i;
        this.backTop();
      }
      let that = this;
      this.loading = true;
      this.permissions = 1;
      this.talentData = [];
      let totalfans = "";
      switch (this.funsNum) {
        case "不限":
          totalfans = 0;
          break;
        case "10w以下":
          totalfans = 1;
          break;
        case "10w-100w":
          totalfans = 2;
          break;
        case "100w-300w":
          totalfans = 3;
          break;
        case "300w-500w":
          totalfans = 4;
          break;
        case "500w-1000w":
          totalfans = 5;
          break;
        case "1000w以上":
          totalfans = 6;
          break;
        default:
      }
      let avgsale = "";
      switch (this.sale) {
        case "不限":
          avgsale = 0;
          break;
        case "1w以下":
          avgsale = 1;
          break;
        case "1w-5w":
          avgsale = 2;
          break;
        case "5w-10w":
          avgsale = 3;
          break;
        case "10w-20w":
          avgsale = 4;
          break;
        case "20w-50w":
          avgsale = 5;
          break;
        case "50w以上":
          avgsale = 6;
          break;
        default:
      }
      let livenum = "";
      switch (this.liveSession) {
        case "不限":
          livenum = 0;
          break;
        case "5场以下":
          livenum = 1;
          break;
        case "5-10场":
          livenum = 2;
          break;
        case "10-20场":
          livenum = 3;
          break;
        case "20-50场":
          livenum = 4;
          break;
        case "50场以上":
          livenum = 5;
          break;

        default:
      }
      let daynum = "";
      switch (this.time) {
        case "近30天":
          daynum = 1;
          break;
        case "近60天":
          daynum = 2;
          break;
        case "近90天":
          daynum = 3;
          break;
        default:
      }

      // 带货类型
      this.$axios
        .post(
          "/api/author/livehigh",
          {
            keyword: this.input,
            categoryId: this.industryItemObj.id,
            proCategory: this.checkedDatasJoe.parentId,
            categoryIds: this.checkedDatasJoe.childIds,
            totalfans: totalfans,
            avgsales: avgsale,
            livenum: livenum,
            daynum: daynum,
            order: that.orderBy,
            sort: that.sortValue,
            pageindex: this.page,
            pagesize: 20
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel) that.cancel();
              that.cancel = c;
            })
          }
        )
        .then(res => {
          this.searchLogo();
          if (res.data.code1 ==1013||res.data.code == 1003||res.data.code == 1013) {
            this.loading = false;
            this.permissions = 0;
            this.talentData = [];
          }
          if (res.data.code == 0) {
            // 控制最多可看25页  500条
            if (res.data.count > 500) {
              this.count = 500;
            } else {
              this.count = res.data.count;
            }
            this.loading = false;
            this.talentData = res.data.data;
          } else if (res.data.code == 1002) {
            this.loading = false;
            this.talentData = [];
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
  }
};
</script>

<style scoped lang="less">
#talentLibrary {
  min-height: 92vh;
  background-color: #f5f5f5;
  overflow: hidden;
  .headerImg {
    width: 100%;
    height: 54px;
    margin-top: 14px;
    margin-bottom: 14px;
  }
  .topBox {
    background-color: #fff;
    padding: 20px;

    .mysearchBox {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 20px;
      .input_group {
        position: relative;
        width: 400px;
        height: 40px;
        border-radius: 4px 4px 4px 4px;
        // border: solid 1px #1779ff;
        border: solid 1px #e6e6e6;
        box-sizing: border-box;
        input {
          width: 100%;
          font-size: 14px;
          height: 38px;
          line-height: 38px;
          box-sizing: border-box;
          padding-left: 19px;
          padding-right: 70px;
          border: none;
          border-radius: 4px 4px 4px 4px;
        }
        > div {
          position: absolute;
          right: 0;
          cursor: pointer;
          top: -1px;
          text-align: center;
          width: 60px;
          height: 40px;
          background-color: #fd7f2c;
          border-radius: 0px 4px 4px 0px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 16px;
          }
        }
      }
      .InputRecord {
        width: 400px;
        border-radius: 5px;
        box-sizing: border-box;
        background-color: #fff;
        position: absolute;
        top: 42px;
        left: 0;
        z-index: 10;
        padding: 4px 10px;
        box-shadow: 0px 0px 20px 0px rgba(236, 236, 236, 0.7);
        ul {
          .first {
            width: calc(100% - 14px);
            height: 32px;
            // background: chartreuse;
            font-size: 12px;
            line-height: 36px;
            color: #888888;
            padding-left: 14px;
            img {
              float: right;
              width: 15px;
              height: 16px;
              margin: 8px 9px 0px 0px;
              &:hover {
                cursor: pointer;
              }
            }
          }
          .second {
            width: calc(100% - 14px);
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            color: #222222;
            padding-left: 14px;
            span {
              display: inline-block;
              width: 300px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            &:hover {
              cursor: pointer;
              background-color: #f9f9f9;
            }
            &:hover img {
              display: block;
            }
            img {
              float: right;
              margin: 13px 11px 0px 0px;
              display: none;
              &:hover {
                cursor: pointer;
              }
            }
          }
        }
      }
      .clearBox {
        cursor: pointer;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 20px;
        img {
          width: 15px;
          height: 16px;
        }
        span {
          font-size: 14px;
          color: #888888;
          padding-left: 5px;
        }
        .clearClass {
          color: #fd7f2c;
        }
      }
    }
    dl {
      display: flex;
      font-size: 14px;
      margin-bottom: 6px;
      &:last-child {
        margin-bottom: 0;
      }
      dt {
        padding-top: 6px;
        width: 76px;
        flex-shrink: 0;
        color: #888;
      }
      dd {
        position: relative;
        color: #555;
        height: 36px;
        overflow: hidden;
        .cg_items {
          display: inline-block;
          font-size: 0;
          span {
            display: inline-block;
            line-height: 32px;
            padding: 0 16px;
            font-size: 14px;
            margin-bottom: 7px;
            margin-right: 8px;
            cursor: pointer;
            vertical-align: middle;
            &.active {
              color: #fd7f2c;
              background-color: #fff1e8;
              border-radius: 4px;
            }
          }
          span:hover {
            color: #ff924b;
          }
          i {
            position: absolute;
            right: 0;
            top: 6px;
            font-size: 14px;
            font-style: normal;
            color: #ff924b;
            cursor: pointer;
          }
        }
        &.overstep {
          padding-right: 22px;
          .cg_items {
            i {
              display: inline-block;
              vertical-align: middle;
            }
          }
        }
        &.is_unfold {
          padding-right: 0;
          height: inherit;
          .cg_items {
            i {
              position: relative;
              top: 1px;
              left: 10px;
            }
          }
        }
      }
    }
    .selectBox_time {
      display: flex;
      justify-content: space-between;

      .selectBox {
        display: flex;
        div {
          margin-right: 20px;
        }
        /deep/ #el_select {
          > span {
            color: #888888 !important;
          }
        }
      }
    }
  }
  .upTime {
    padding-right: 20px;
    height: 45px;
    line-height: 45px;
    text-align: right;
    font-size: 14px;
    font-weight: normal;
    color: #888888;
  }
  .search_result {
    background: #ffffff;
    min-height: 50vh;
    padding: 20px;
    .live_box {
      padding-left: 31px;
      display: flex;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #e5e5e5;
        margin-right: 10px;
        cursor: pointer;
      }
      .live_box_right {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .title {
        font-size: 14px;
        font-weight: 600;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #222222;
        white-space: nowrap;
        cursor: pointer;
        // width: 244px;

        // overflow: hidden;
        // text-overflow: ellipsis;
      }
      .title:hover {
        color: #ff924b;
      }
      .time {
        font-size: 13px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #888888;
        text-align: left;
        margin-top: 6px;
        white-space: nowrap;
      }
    }
    table {
      thead {
        img {
          width: 5px;
          height: 10px;
          vertical-align: 0;
        }
        tr {
          th:nth-child(1) {
            min-width: 12%;
            text-align: left;
            padding-left: 39px;
          }
          th:nth-child(2),
          th:nth-child(3),
          th:nth-child(4),
          th:nth-child(5),
          th:nth-child(6),
          th:nth-child(7),
          th:nth-child(8) {
            width: 11.2%;
          }

          th:nth-child(3),
          th:nth-child(4),
          th:nth-child(5),
          th:nth-child(6),
          th:nth-child(7) {
            cursor: pointer;
          }
        }
      }

      tbody {
        tr {
          height: 78px;

          td:nth-child(2) {
            font-size: 14px;
            text-align: center;
          }
          td:nth-child(3),
          td:nth-child(4),
          td:nth-child(5),
          td:nth-child(6),
          td:nth-child(7) {
            font-family: DINAlternate-Bold;
            font-size: 15px;
            text-align: center;
          }
          td:nth-child(8) {
            text-align: center;
            .no_collect {
              width: 88px;
              height: 32px;
              background-color: transparent;
              border-radius: 4px;
              font-size: 14px;
              color: #fd7f2c;
              border: 1px solid #fd7f2c;
            }
            .no_collect:hover {
              color: #ff924b;
              border-color: #ff924b;
            }
          }
        }
      }
    }

    .upgradeBox {
      min-height: 60vh;
      display: flex;
      align-items: center;
    }
    .empty_box {
      display: flex;
      align-items: center;
      justify-content: center;
      .service {
        color: #fd7f2c;
        cursor: pointer;
      }
    }
  }
  .dialog_box {
    .box {
      margin-top: 30px;
      padding-bottom: 14px;
      border-bottom: 1px solid #efefef;
      .live_box {
        display: flex;

        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 1px solid #e5e5e5;
          margin-right: 10px;
          cursor: pointer;
        }
        .live_box_right {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .title {
          font-size: 14px;
          font-weight: 600;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #222222;
          white-space: nowrap;
          cursor: pointer;
          text-align: left;
        }
        .title:hover {
          color: #ff924b;
        }
        .time {
          font-size: 13px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #888888;
          text-align: left;
          margin-top: 6px;
          white-space: nowrap;
        }
      }
    }
    .topBox_02 {
      margin-top: 14px;
      .notice-box {
        width: 4px;
        height: 16px;
        border-radius: 100px;
        margin-right: 6px;
        background-color: #fd7f2c;
        margin-top: 1px;
      }
      > div {
        font-size: 16px;
        color: #222;
        font-weight: 600;

        display: flex;
        align-items: center;
      }
    }
    .contact {
      font-size: 13px;
      text-align: left;
      color: #222222;
      margin-top: 20px;
      margin-left: 10px;
    }
    .box_02 {
      display: flex;
      margin-top: 20px;
      position: relative;
      .box_left {
        width: 207px;

        padding-left: 10px;

        text-align: left;
        font-size: 14px;
        font-weight: normal;
        color: #222222;
        border-right: 1px solid #efefef;
        p:nth-child(2) {
          margin-top: 9px;
          font-size: 14px;
          color: #555;
          span {
            color: #ea1b0b;
          }
        }
        div {
          font-size: 14px;
          font-weight: normal;
          margin-top: 9px;
          color: #888888;
        }
      }
      .box_right {
        padding-left: 49px;
        text-align: left;
        font-size: 14px;
        font-weight: normal;
        color: #222222;
        p:nth-child(2) {
          margin-top: 9px;
          font-size: 14px;
          color: #555;
          span {
            color: #ea1b0b;
          }
        }
        .no_open {
          font-size: 14px;
          font-weight: normal;
          margin-top: 9px;
          color: #888888;
        }
      }
      .zw {
        position: absolute;
        top: 104px;

        color: #888888;
      }
    }
  }
  .popover {
    position: absolute !important;
    left: 50%;
    margin-left: -133px;
    bottom: 94px;
    .service {
      color: #fd7f2c;
      cursor: pointer;
    }
  }
}
// 联系客服
.popoverBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  .message_content {
    width: 141px;
    height: 139px;
    padding-top: 20px;
  
    background-color: #ffffff;
    box-shadow: 0px 0px 19px 1px rgba(239, 239, 239, 0.7);
    border-radius: 4px;
    margin-bottom: 10px;
    img {
      width: 120px;
      height: 120px;
    
    }
  }

  .message_content {
    font-size: 13px;
    color: #555;
    text-align: center;
  }
  // 升级会员
}
.message_content img {
  width: 70px;
  height: 70px;
  margin-bottom: 6px;
}
.message_content {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 12px;
  letter-spacing: 0px;
  text-align: center;
}
.relationTop {
  bottom: 22px !important;
}
</style>
